<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>1.页面加载过程</title>
</head>
<body>
  资源的形式: html代码；媒体文件，如图片，视频等；javascript css
  
  
  1.下载资源：各个资源类型，下载过程
  2.渲染页面：结合HTML css  javascript 图片等

  加载过程：
  1.DNS解析：域名 -> IP地址
  2.浏览器根据IP地址向服务器发起http请求
  2.服务器处理http请求，并返回给浏览器
  渲染过程：
  1.根据HTML代码生成DOM Tree
  2.根据CSS代码生成CSSOM
  3.将DOM Tree和CSSOM整合形成Render Tree
  3.2 布局
  4.根据Render Tree渲染完成
  5.遇到 script 则暂停渲染，优先加载并执行
  6.直至把Render Tree渲染完成 

  <!-- 从输入url到渲染出页面整个过程 -->
  1.输入url
  2.DNS解析 url地址-》ip地址
  3.TCP三次握手
  4.发送http请求
  5.响应http请求
  6.渲染页面




  <!-- window.onload和DOMContentLoaded -->
  window.onload：页面全部资源加载玩才会执行，包括图片，视频

  DOMContentLoaded：DOM渲染完即可执行，此时图片，视频还可能没有加载

  
</body>
</html>